<template>
  <el-dialog class="daily-dialog" title="每日早安消息" :visible="visible" @close="handleClose" width="750px">
    <div class="dialy-dialog__form flex-box">
      <div class="photo flex-grow-0">
        <img :src="dialyPhoto" alt="每日早安消息" width="186" height="294">
      </div>
      <div class="main flex-item">
        <div class="content">
          <p>亲爱的 <span class="f-blue">{{adminName}}</span>  ，</p> 
          <p>{{dialyMsg}}</p>
          <p>{{dialyRemind}}</p>
        </div>
        <div class="form-bottom t-right">
          <label>不再显示</label>
          <el-switch v-model="notShow" active-color="#0073dd" inactive-color="#a2aec8" style="margin-left:20px"></el-switch>
          <ui-button @click="handleClose" type="blue" style="margin-left:50px">朕知道了</ui-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {Dialog, Switch} from 'element-ui'
  export default {
    components: {
      [Dialog.name]: Dialog,
      [Switch.name]: Switch
    },
    props: ['visible'],
    data () {
      return {
        dialyPhoto: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541341900582&di=d70a166535565a3e52a3ba854250d375&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F7dd98d1001e93901d523c6b171ec54e736d19618.jpg',
        notShow: false, //不再显示
        adminName: 'Omega',
        dialyMsg: '您推荐的候选人 Brady 已成功被招聘调配中心规划分析专员岗位Offer！',
        dialyRemind: '美好的一天！继续干劲满满地推荐候选人吧！'
      }
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
      }
    }
  }
</script>

<style lang="scss">
  .daily-dialog .el-dialog{
    .el-dialog__header{
      background: #fff;
      padding: 20px 30px;
      .el-dialog__title{
        color: #5e5e5e
      }
    }
  }
  .dialy-dialog__form{
    padding: 5px 30px 30px;
    .photo{
      width: 186px; 
      height: 294px;
    }
    .main{
      padding: 0 15px 0 35px;
      .content{
        min-height: 240px;
        p{
          line-height: 1.5;
          font-size: 14px;
          color: #919191;
          margin-bottom: 25px;
        }
        .f-blue{
          color: #0073dd;
        }
      }
    }
  }
 
</style>